import { defineConfig, loadEnv } from 'vite'
import { resolve } from 'path' // 主要用于alias文件路径别名
import vue from '@vitejs/plugin-vue'
import postCssPxToRem from 'postcss-pxtorem'
import lodash from 'lodash'
// 第四步 使用
// const api = getEnv('VITE_BASIC_URL')
const envResolve = (mode) => {
  return loadEnv(mode, process.cwd())
}

// 第三步 传 要读取的 参数 key
const getEnv = function (env) {
  //           我这里采用了lodash 读取 环境名
  return envResolve(lodash.last(process.argv))[env]
}

// https://vitejs.dev/config/
export default defineConfig({
  base: '',
  // base: getEnv('VITE_USER_NODE_ENV') == 'production' ? '/' : '/',
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, '.', 'src'),
      '/images': 'src/assets/images/'
    }
  },
  // 强制预构建插件包
  optimizeDeps: {
    include: ['axios']
  },
  // 打包配置
  build: {
    target: 'modules',
    outDir: 'dist', // 指定输出路径
    assetsDir: 'static', // 指定生成静态资源的存放路径
    minify: 'terser', // 混淆器，terser构建后文件体积更小
    chunkSizeWarningLimit: 1500
  },
  // 本地运行配置，及反向代理配置
  server: {
    open: true, // 在服务器启动时自动在浏览器中打开应用程序
    hmr: true, // 开启热更新'
    host: '0.0.0.0',
    // 反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
    proxy: {
      '/api': {
        target: getEnv('VITE_BASIC_URL'), // 代理接口
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  css: {
    postcss: { plugins: [postCssPxToRem({ rootValue: 37.5, propList: ['*'] })] }, // //75表示750设计稿，37.5表示375设计稿
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${resolve('src/assets/css/base.less')}";`
        },
        javascriptEnabled: true
      }
    }
  },
  rollupOptions: {
    output: {
      manualChunks(id) {
        if (id.includes('node_modules')) {
          return id.toString().split('node_modules/')[1].split('/')[0].toString()
        }
      }
    },
    chunkFileNames: (chunkInfo) => {
      const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : []
      const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]'
      return `js/${fileName}/[name].[hash].js`
    }
  }
})
